<template>
  <div class="header">
    <div class="header-left">
      <breadcrumb />
    </div>
    
    <div class="header-right">
      <el-tooltip content="全屏显示" placement="bottom">
        <div class="header-icon" @click="toggleFullScreen">
          <el-icon v-if="isFullscreen"><Aim /></el-icon>
          <el-icon v-else><FullScreen /></el-icon>
        </div>
      </el-tooltip>
      
      <el-tooltip content="通知" placement="bottom">
        <!-- 添加点击事件处理 -->
        <div class="header-icon notification-icon" @click="handleNotificationClick">
          <el-badge :value="notificationCount" :max="99" :hidden="notificationCount === 0">
            <el-icon><Bell /></el-icon>
          </el-badge>
        </div>
      </el-tooltip>
      
      <el-dropdown trigger="click" @command="handleUserCommand">
        <div class="user-dropdown">
          <el-avatar :size="32" :src="userAvatar" />
          <span class="username">{{ username }}</span>
          <el-icon><CaretBottom /></el-icon>
        </div>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="profile">
              <el-icon><User /></el-icon>个人中心
            </el-dropdown-item>
            <el-dropdown-item divided command="logout">
              <el-icon><SwitchButton /></el-icon>退出登录
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import { Bell, FullScreen, Aim, User, SwitchButton, CaretBottom } from '@element-plus/icons-vue';
import Breadcrumb from '@/components/Breadcrumb.vue';

const props = defineProps({
  username: {
    type: String,
    default: '未登录'
  },
  userAvatar: {
    type: String,
    default: ''
  },
  notificationCount: {
    type: Number,
    default: 0
  }
});

const emit = defineEmits(['logout', 'profile', 'view-notifications']);

const isFullscreen = ref(false);

// 添加通知点击处理函数
const handleNotificationClick = () => {
  console.log('通知图标被点击');
  emit('view-notifications');
};

const toggleFullScreen = () => {
  const element = document.documentElement;
  
  if (!isFullscreen.value) {
    if (element.requestFullscreen) {
      element.requestFullscreen();
    } else if (element.webkitRequestFullscreen) {
      element.webkitRequestFullscreen();
    } else if (element.msRequestFullscreen) {
      element.msRequestFullscreen();
    }
    isFullscreen.value = true;
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    }
    isFullscreen.value = false;
  }
};

const handleUserCommand = (command) => {
  switch (command) {
    case 'profile':
      emit('profile');
      break;
    case 'logout':
      emit('logout');
      break;
  }
};

const handleFullscreenChange = () => {
  isFullscreen.value = !!document.fullscreenElement;
};

onMounted(() => {
  document.addEventListener('fullscreenchange', handleFullscreenChange);
  document.addEventListener('webkitfullscreenchange', handleFullscreenChange);
  document.addEventListener('mozfullscreenchange', handleFullscreenChange);
  document.addEventListener('MSFullscreenChange', handleFullscreenChange);
});

onBeforeUnmount(() => {
  document.removeEventListener('fullscreenchange', handleFullscreenChange);
  document.removeEventListener('webkitfullscreenchange', handleFullscreenChange);
  document.removeEventListener('mozfullscreenchange', handleFullscreenChange);
  document.removeEventListener('MSFullscreenChange', handleFullscreenChange);
});
</script>

<style scoped>
.header {
  height: 60px;
  background-color: #fff;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
}

.header-left {
  display: flex;
  align-items: center;
}

.header-right {
  display: flex;
  align-items: center;
}

.header-icon {
  font-size: 20px;
  padding: 0 10px;
  cursor: pointer;
  color: #606266;
}

/* 添加一点交互效果 */
.notification-icon:hover {
  color: #409EFF;
}

.user-dropdown {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 0 10px;
}

.username {
  margin: 0 5px;
  color: #606266;
}
</style>